<template>
  <div>
    <el-row>
      <el-col :span="8" v-for="(o, index) in products" :key="o">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div style="float: left; margin: 10px; padding: 0px">
            <img
              :src="address[index]"
              class="image"
              width="180px"
              height="180px"
            />
          </div>
          <div style="float: left; margin-top: 50px">
            <div>{{ o.name }}</div>
            <div class="bottom clearfix" style="padding: 5px">
              <span style="color: red"><em>¥</em>{{ o.price1 }}</span>
            </div>
            <el-button type="text" class="button" @click="addCart(o)"
              >加入购物车</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      products: [],
      address: [],
    };
  },
  methods: {
    //获取商品列表,只处理的图片的地址
    loadData() {
      axios
        .get("/goods/list")
        .then((response) => {
          this.products = response.data;
          for (var i = 0; i < this.products.length; i++) {
            var ads =
              "http://202.193.53.235:8080/" + this.products[i].pthumbnail;
            this.address.push(ads);
          }
          console.log("数据加载get成功");
        })
        .catch((error) => {
          //console.log(error);
        });
    },
    //http://[ip]:[port]/cart/add?userId=[userId]&goodsId=[goodsId]&num=[num]&price=[price]
    //添加商品到购物车
    addCart(o) {
      if (this.$store.state.login == false) {
        alert("请先登录");
        return;
      }
      axios
        .get("/cart/add", {
          params: {
            userId: this.$store.state.clientId,
            goodsId: o.id,
            num: 1,
            price: o.price1,
          },
        })
        .then((response) => {
          this.data.getCar();
        })
        .catch((error) => {
          //console.log(error);
        });
    },
  },
};
</script>

<style>
.el-card {
  width: 450px;
  height: 200px;
  margin: 10px;
  border-radius: 20px;
  border-color: #c0c4cc;
}
</style>